<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <!-- 1.引入echarts -->
 <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
</head>
<body>
 <!-- 2.准备一个展示图标的盒子 -->
 <div style="width: 600px;height:400px"></div>
 <script>
  // 3.初始化echarts实例对象
  var mycharts=echarts.init(document.querySelector('div'));
  // 4.准备echarts配置项
  var option={
    title:{
      text:'成绩',//主标题文本
      link:'https://echarts.apache.org/zh/option.html#title.link',
      textStyle:{
        color:'red'
      }

    },
   xAxis:{
    type:'category',//x轴的类别
    data:['小明','小红','小王']
   },
   yAxis:{
    type:'value',//数值轴
   },
   series:[{
    name:'语文',
    type:'bar',//可以决定图标的类型
    data:[70,80,90]
   }]
  }
// 5.将配置项设置给echarts实例对象
  mycharts.setOption(option);


 </script>
</body>
</html>